<template>
  <!-- 未显示释义时的按钮 -->
  <template v-if="currentWord && !showDefinition">
    <div class="grid grid-cols-3 gap-4">
      <button 
        class="pt-3 pb-2 border-none text-white font-semibold text-lg transition-all duration-300 bottom-line-green" 
        @click="$emit('response', 'know')"
      >
        认识
      </button>
      <button 
        class="pt-3 pb-2 border-none text-white font-semibold text-lg transition-all duration-300 bottom-line-yellow" 
        @click="$emit('response', 'fuzzy')"
      >
        模糊
      </button>
      <button 
        class="pt-3 pb-2 border-none text-white font-semibold text-lg transition-all duration-300 bottom-line-red" 
        @click="$emit('response', 'unknown')"
      >
        不认识
      </button>
    </div>
  </template>
  
  <!-- 显示释义且不是最后一个单词时的按钮 -->
  <template v-else-if="currentWord && showDefinition">
    <div class="grid grid-cols-2 gap-4">
      <button 
        class="pt-3 pb-2 border-none text-white font-semibold text-lg transition-all duration-300 bottom-line-blue" 
        @click="$emit('next-word')"
      >
        下一词
      </button>
      <button 
        class="pt-3 pb-2 border-none text-white font-semibold text-lg transition-all duration-300 bottom-line-red" 
        @click="$emit('wrong')"
      >
        记错了
      </button>
    </div>
  </template>
  
  <!-- 学习完成时的按钮，自动转跳提示 -->
  <template v-else>
    <div class="w-full text-center pt-3 pb-2 text-white font-semibold text-lg">
      <div class="flex items-center justify-center gap-2">
        <span>正在跳转到文章页面</span>
        <span class="loading-dots">...</span>
      </div>
    </div>
  </template>
</template>

<script setup>
import { onMounted, nextTick, watch, ref } from 'vue';

const props = defineProps({
  currentWord: {
    type: Object,
    default: null
  },
  showDefinition: {
    type: Boolean,
    default: false
  },
  progress: {
    type: Number,
    default: 0
  }
});

const emit = defineEmits([
  'response',
  'next-word',
  'wrong',
  'generate-essay',
  'back'
]);

// 用于确保组件完全渲染
let mounted = ref(false);
let redirectTriggered = ref(false);

// 首次加载检查
onMounted(() => {
  nextTick(() => {
    mounted.value = true;
    setTimeout(() => {
      checkRedirect();
    }, 200);
  });
});

// 监听单词状态和进度变化
watch([() => props.currentWord, () => props.progress], () => {
  if (mounted.value) {
    checkRedirect();
  }
}, { deep: true });

// 检查是否需要重定向
function checkRedirect() {
  if (props.progress >= 100) {
    emit('generate-essay')
  }
}
</script>

<style scoped>
/* 底部按钮线条样式 */
.bottom-line-green::after,
.bottom-line-yellow::after,
.bottom-line-red::after,
.bottom-line-blue::after,
.bottom-line-gray::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  border-radius: 1.5px;
}

.bottom-line-green,
.bottom-line-yellow,
.bottom-line-red,
.bottom-line-blue,
.bottom-line-gray {
  position: relative;
}

.bottom-line-green::after {
  background-color: #4CAF50;
}

.bottom-line-yellow::after {
  background-color: #FFC107;
}

.bottom-line-red::after {
  background-color: #F44336;
}

.bottom-line-blue::after {
  background-color: #2196F3;
}

.bottom-line-gray::after {
  background-color: #333;
}

@keyframes loading {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.loading-dots {
  animation: loading 1.5s infinite;
}
</style> 